<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true" :title="'设备数据'"></u-navbar>
		<u-form ref="equipmentForm" :model="equipmentForm" label-width="100px" class="wrap">
			<u-form-item label="设备名称" prop="equipmentName">
				<u-input type="select"  :select-open="equipmentShow" placeholder="请选择设备" v-model="equipmentForm.equipmentName"
				 @click="equipmentShow=true"></u-input>
			</u-form-item>
			<!-- 设备详情 -->
			<u-cell-group v-model="equipmentInfo" :hidden="hidden">
				<u-cell-item :border-bottom="true" title="企业名称" :value="equipmentInfo.enterpriseName" :arrow="false"></u-cell-item>
				<u-cell-item :border-bottom="true" title="设备楼层" :value="equipmentInfo.floor" :arrow="false"></u-cell-item>
				<u-cell-item :border-bottom="true" title="设备地址" :value="equipmentInfo.address" :arrow="false"></u-cell-item>
				<u-cell-item :border-bottom="true" title="设备状态" :value="equipmentInfo.status | status" :arrow="false"></u-cell-item>
			</u-cell-group>
			
			<!-- 地图 -->
			<baidu-map class="map-view" :center="{lng:equipmentInfo.longitude, lat: equipmentInfo.latitude}" :zoom="15"
			 :scroll-wheel-zoom="true" :hidden="hidden">
				<bm-marker :position="{lng:equipmentInfo.longitude, lat:equipmentInfo.latitude}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE"
				 :zoom="15" :scroll-wheel-zoom="true">
					<bm-label :content="equipmentInfo.disPlayName" labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 0, height: 30}" />
				</bm-marker>
			</baidu-map>
					
					<view class="qiun-charts" id="main1" :hidden="hidden1">
						<canvas canvas-id="canvasLineA" class="charts" ></canvas>
					</view>
					<view class="qiun-charts" id="main2" :hidden="hidden2">
						<canvas canvas-id="canvasLineA" class="charts" ></canvas>
					</view>
					<view class="qiun-charts" id="main3" :hidden="hidden3">
						<canvas canvas-id="canvasLineA" class="charts" ></canvas>
					</view>
					<view  :hidden="hidden">
						<u-button  @click="ToInspectionList" type="primary" shape="square" style="float: left; width: 48%;" >我要巡检</u-button>
						<u-button  @click="ToMaintenaceList" type="primary" shape="square"  style="float: left;width: 48%; margin-left: 10px;">我要维保</u-button>	
					</view>

		</u-form>

		
		<!-- 设备名称下拉框数据 -->
		<u-select :default-value="defaultValue" mode="single-column" :list="equipmentList" value-name="ucId" label-name="name" v-model="equipmentShow"
		 @confirm="equipmentConfirm" ></u-select>

	<!-- 	<u-select mode="single-column" :list="equipmentList" value-name="ucId" label-name="address" v-model="mentShow"
		 @confirm="equipmentConfirm1"></u-select> -->

	</view>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {
				index:0,
				equipmentInfo: [],
				value2: 2,
				options2: [],
				aaa: null,
				equipmentForm: {},
				DeviceList: [],
				equipmentId: "",
				equipmentList: [],
				equipmentShow: false,
				mentShow: false,
				pageNum: 0,
				finished: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多数据了'
				},
				receiveabc: 0,
				hidden: true,
				hidden1: true,
				hidden2: true,
				hidden3: true,
				charts: '',
				defaultValue: [],
				option1: {
					// title: {
					// 	text: '设备数据'
					// },
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['电池电压', '信号强度', '水压值']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {

					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00']
					},
					yAxis: {
						type: 'value'
					},
					series: [                    {
                        name: '电池电压',
                        type: 'line',
                        stack: '总量',
                        data: [10, 11,12, 12, 11.5, 12, 11.5]
                    },
                    {
                        name: '信号强度',
                        type: 'line',
                        stack: '总量',
                        data: [21 ,19, 14, 21, 16, 22, 18]
                    },
                    {
                        name: '水压值',
                        type: 'line',
                        stack: 'cm',
                        data: [690, 663, 620, 689,662 ,640, 620]
                    }
					]
				},
				option2: {
					// title: {
					// 	text: '设备数据'
					// },
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['电池电压', '信号强度', '探头灵敏度']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
				
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00']
					},
					yAxis: {
						type: 'value'
					},
					series: [                    {
				        name: '电池电压',
				        type: 'line',
				        stack: '总量',
				       data: [4.9, 4.9,5, 4.8, 4.7,4.5, 4.4, 4.9]
				    },
				    {
				        name: '信号强度',
				        type: 'line',
				        stack: '总量',
				        data: [14, 24, 7, 20, 19, 22, 18]
				    },
				    {
				        name: '探头灵敏度',
				        type: 'line',
				        stack: '总量',
				        data: [2 ,1, 3,2, 2, 3, 2]
				    }
					]
				},
				option3: {
					// title: {
					// 	text: '设备数据'
					// },
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['电池电压', '信号强度', '水压值']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
				
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00']
					},
					yAxis: {
						type: 'value'
					},
					series: [                    {
				        name: '电池电压',
				        type: 'line',
				        stack: '总量',
				       data: [4.9, 4.9,5, 4.8, 4.7,4.5, 4.4, 4.9]
				    },
				    {
				        name: '信号强度',
				        type: 'line',
				        stack: '总量',
				        data: [14, 24, 7, 20, 19, 22, 18]
				    },
				    {
				        name: '水压值',
				        type: 'line',
				        stack: '总量',
				        data: [22, 23, 20, 15, 19, 33, 41]
				    }
					]
				}
			}
		},
		onLoad(e) {
			this.equipmentId = e.ucId
		},
		onShow() {
			this.initView()
		},
		methods: {
			initView() {
				this.getEquipmentList()
			},
			getEquipmentInfo(val) {
				console.log(val)
				this.utils.request("/api/app/equipment/getInEquipmentVo", {
					deleted: false,
					ucId: val
				}, "post", "app", true).then(res => {
					console.log(res.data)
					this.equipmentInfo = res.data
					if(this.equipmentInfo.type==0){
						this.hidden1=false
					}else if(this.equipmentInfo.type==1){
						this.hidden2=false
					}
					else if(this.equipmentInfo.type==2){
						this.hidden3=false
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 设备id
			getEquipmentList() {
				this.utils.request("/api/app/equipment/getEquipmentList", {	deleted: false
				}, "post", "app", true).then(res => {
					this.equipmentList = res.data
				}).catch(error => {
					console.log(error)
				})
			},
			equipmentConfirm(e) {
				console.log(e[0])
				// console.log(e[0].value)
				// this.defaultValue[0]=e[0].value
				// console.log(this.defaultValue)
		
				this.hidden = false
				this.hidden1 = true
				this.hidden2= true
				this.hidden3 = true
				e.map((val, index) => {
		// 			console.log(val.value)
						// console.log(index)
						// this.defaultValue[0]=index+1
		// 			console.log(this.defaultValue[0])
					this.equipmentForm.equipmentName = val.label
					this.equipmentForm.ucId = val.value
					this.getEquipmentInfo(val.value)
					this.equipmentForm.address = this.aaa
				})
				// this.defaultValue[0]=e[0]
			},
			ToMaintenaceList(){
				console.log("abc")
				uni.navigateTo({
					url:"/pages/index/equipment/Maintenance/edit?ucId="+this.equipmentInfo.ucId	
				})
			},
			ToInspectionList(){
				console.log(this.equipmentInfo.ucId)
				uni.navigateTo({
					url:"/pages/index/equipment/Inspection/edit?ucId="+this.equipmentInfo.ucId	
				})
			},
			change(index) {
				this.receiveabc = index
				this.initView()
			},
			drawLine(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption(this.option1, true)
			},
			drawLine2(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption(this.option2, true)
			},
			drawLine3(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption(this.option3, true)
			},
		},
		//调用
		mounted() {
			this.$nextTick(function() {
				this.drawLine('main1')
				this.drawLine2('main2')
				this.drawLine3('main3')
			})
		}
	}
</script>

<style>
	.map-view {
		width: 100%;
		height: 100px
	}
	.qiun-charts {
			width: 750upx;
			height: 500upx;	
		}
		
		.charts {
			width: 750upx;
			height: 500upx;

		}
</style>
